<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <button id="abc">22</button>
</div>

<script>
  /**
   * 箭头函数中没有 arguments，只能使用 ... 动态获取实参
   */
  const getSum = (...arr) => {
    let sum = 0
    for (let i = 0; i < arr.length; i++) {
      sum += arr[i]
    }
    return sum
  }
  console.log(getSum(2, 3, 4)) // 9

  /**
   * 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。
   */
  const teacher = {
    name: '张老师',
    sayHi: function () {
      console.log("teacer.sayHi的this：", this); // obj 张老师
      const count = () => {
        console.log("teacer.sayHi.count的this：", this); // obj 张老师
      }
      count();
    }
  }
  teacher.sayHi();

  /**
   * 事件回调函数 使用箭头函数时，`this` 为全局的 `window`，因此DOM事件回调函数不推荐使用箭头函数
   */
      // DOM 节点
  const btn = document.querySelector('#abc');
  // 箭头函数 此时 this 指向了 window
  btn.addEventListener('click', () => {
      console.log(this) // window
  })
  // 普通函数 此时 this 指向了 DOM 对象
  btn.addEventListener('click', function () {
      console.log(this) // 打印button
  })

</script>
</body>
</html>